<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white overflow-x-hidden">
        <!-- Navigation -->
        <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
            <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
                <div class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent">九型人格 AI</div>
                <div class="flex items-center space-x-6">
                    <a href="#features" class="text-gray-300 hover:text-white transition-colors cursor-pointer">功能特色</a>
                    <a href="#technology" class="text-gray-300 hover:text-white transition-colors cursor-pointer">技术优势</a>
                    <a href="#reports" class="text-gray-300 hover:text-white transition-colors cursor-pointer">报告预览</a>
                    <button
                        class="px-6 py-2 bg-gradient-to-r from-blue-500 to-orange-500 rounded-full hover:shadow-lg hover:shadow-orange-500/25 transition-all duration-300 cursor-pointer whitespace-nowrap !rounded-button"
                    >
                        登录 / 注册
                    </button>
                </div>
            </div>
        </nav>
        <!-- Hero Section -->
        <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" :style="{ backgroundImage: `url('${heroBackground}')` }"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-900/70 to-transparent"></div>
            <!-- Animated particles -->
            <div class="absolute inset-0 particles-container">
                <div
                    v-for="(particle, i) in particles"
                    :key="i"
                    class="absolute rounded-full particle"
                    :class="particle.class"
                    :style="particle.style"
                ></div>
            </div>
            <div class="relative z-10 max-w-4xl mx-auto px-6 text-center">
                <h1
                    class="text-6xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-purple-400 to-orange-400 bg-clip-text text-transparent animate-gradient"
                >
                    Discover Your True Self
                </h1>
                <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
                    全球首个融合大模型算法的九型人格测试系统<br />
                    精准解析你的核心特质与成长路径
                </p>
                <div class="flex flex-col items-center space-y-4">
                    <button
                        class="px-12 py-4 bg-gradient-to-r from-blue-500 to-orange-500 text-white text-xl font-semibold rounded-full hover:shadow-2xl hover:shadow-orange-500/30 transform hover:scale-105 transition-all duration-300 cursor-pointer whitespace-nowrap !rounded-button"
                        @click="scrollToTest"
                    >
                        🚀 免费开始测试
                    </button>
                    <p class="text-sm text-gray-400">只需 12 分钟，解锁你的内在宇宙</p>
                </div>
            </div>
        </section>
        <!-- Technology Advantages -->
        <section id="technology" class="py-20 bg-gradient-to-b from-slate-900 to-slate-800">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent">
                        技术革新，精准洞察
                    </h2>
                    <p class="text-xl text-gray-300">采用前沿 AI 算法，为你提供最准确的人格分析</p>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <div
                        class="bg-gradient-to-br from-blue-900/50 to-purple-900/50 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-8 hover:shadow-xl hover:shadow-blue-500/20 transition-all duration-300 cursor-pointer"
                    >
                        <div class="text-center">
                            <div
                                class="w-16 h-16 mx-auto mb-6 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center"
                            >
                                <span class="text-3xl">🧠</span>
                            </div>
                            <h3 class="text-xl font-bold mb-4 text-blue-400">GPT-4o 多模态分析</h3>
                            <p class="text-gray-300 leading-relaxed">融合自然语言处理与行为模式识别，准确率高达 92%，超越传统测试方法</p>
                        </div>
                    </div>
                    <div
                        class="bg-gradient-to-br from-purple-900/50 to-pink-900/50 backdrop-blur-sm border border-purple-500/20 rounded-2xl p-8 hover:shadow-xl hover:shadow-purple-500/20 transition-all duration-300 cursor-pointer"
                    >
                        <div class="text-center">
                            <div
                                class="w-16 h-16 mx-auto mb-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center"
                            >
                                <span class="text-3xl">📊</span>
                            </div>
                            <h3 class="text-xl font-bold mb-4 text-purple-400">动态个性化报告</h3>
                            <p class="text-gray-300 leading-relaxed">基于神经网络算法生成 3000+ 种个性化报告，匹配你的独特行为模式</p>
                        </div>
                    </div>
                    <div
                        class="bg-gradient-to-br from-orange-900/50 to-red-900/50 backdrop-blur-sm border border-orange-500/20 rounded-2xl p-8 hover:shadow-xl hover:shadow-orange-500/20 transition-all duration-300 cursor-pointer"
                    >
                        <div class="text-center">
                            <div
                                class="w-16 h-16 mx-auto mb-6 bg-gradient-to-r from-orange-500 to-red-500 rounded-full flex items-center justify-center"
                            >
                                <span class="text-3xl">∞</span>
                            </div>
                            <h3 class="text-xl font-bold mb-4 text-orange-400">LSTM 预测模型</h3>
                            <p class="text-gray-300 leading-relaxed">基于 16 因子人格理论训练，实时预测你的成长轨迹与潜能发展方向</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Features Section -->
        <section id="features" class="py-20 bg-gradient-to-b from-slate-800 to-slate-900">
            <div class="max-w-7xl mx-auto px-6">
                <div class="grid md:grid-cols-2 gap-16 items-center">
                    <div>
                        <h2 class="text-4xl font-bold mb-8 bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent">
                            解锁你的内在密码
                        </h2>
                        <div class="space-y-6">
                            <div class="flex items-start space-x-4">
                                <div
                                    class="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center flex-shrink-0"
                                >
                                    <span class="text-xl">🧠</span>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold mb-2 text-blue-400">核心恐惧与欲望图谱</h3>
                                    <p class="text-gray-300">深度解析你的内在驱动力，理解行为背后的深层动机</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4">
                                <div
                                    class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0"
                                >
                                    <span class="text-xl">💼</span>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold mb-2 text-purple-400">职业适配指数分析</h3>
                                    <p class="text-gray-300">AI 智能匹配最适合的职业方向，提供个性化沟通策略</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4">
                                <div
                                    class="w-12 h-12 bg-gradient-to-r from-orange-500 to-red-500 rounded-full flex items-center justify-center flex-shrink-0"
                                >
                                    <span class="text-xl">🗺️</span>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold mb-2 text-orange-400">专属成长计划</h3>
                                    <p class="text-gray-300">量身定制的发展路径，包含书籍推荐、课程建议和实践指南</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <div
                            class="w-full h-96 relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-900/30 to-purple-900/30 backdrop-blur-sm border border-blue-500/20"
                        >
                            <img :src="personalityChart" alt="九型人格图表" class="w-full h-full object-cover object-center rounded-2xl" />
                            <div class="absolute inset-0 bg-gradient-to-t from-slate-900/50 to-transparent"></div>
                            <div class="absolute bottom-6 left-6 right-6">
                                <p class="text-sm text-gray-300 italic">"你不是一个数字，而是一幅动态成长的灵魂地图"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Real-time Data -->
        <section class="py-16 bg-gradient-to-r from-blue-900/50 to-purple-900/50 backdrop-blur-sm">
            <div class="max-w-7xl mx-auto px-6">
                <div class="grid md:grid-cols-3 gap-8 text-center">
                    <div class="space-y-2">
                        <div class="text-4xl font-bold text-blue-400">{{ todayUsers.toLocaleString() }}+</div>
                        <p class="text-gray-300">今日测试用户</p>
                    </div>
                    <div class="space-y-2">
                        <div class="text-4xl font-bold text-purple-400">{{ totalUsers.toLocaleString() }}+</div>
                        <p class="text-gray-300">累计服务用户</p>
                    </div>
                    <div class="space-y-2">
                        <div class="text-4xl font-bold text-orange-400">92%</div>
                        <p class="text-gray-300">测试准确率</p>
                    </div>
                </div>
                <div class="text-center mt-8">
                    <p class="text-lg text-gray-300">
                        今日已帮助
                        <span class="text-orange-400 font-semibold">{{ todayUsers.toLocaleString() }}</span>
                        人发现自我
                    </p>
                </div>
            </div>
        </section>
        <!-- Reports Preview -->
        <section id="reports" class="py-20 bg-gradient-to-b from-slate-900 to-slate-800">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent">专业报告预览</h2>
                    <p class="text-xl text-gray-300">深度解析，可视化呈现你的人格特质</p>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <div
                        v-for="(report, index) in reportPreviews"
                        :key="index"
                        class="bg-gradient-to-br from-slate-800/80 to-slate-700/80 backdrop-blur-sm border border-gray-600/30 rounded-2xl p-6 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300 cursor-pointer transform hover:scale-105"
                    >
                        <div class="w-full h-48 mb-6 relative overflow-hidden rounded-xl">
                            <img :src="report.image" :alt="report.title" class="w-full h-full object-cover object-center" />
                            <div class="absolute inset-0 bg-gradient-to-t from-slate-900/70 to-transparent"></div>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-center" :class="report.color">
                            {{ report.title }}
                        </h3>
                        <p class="text-gray-300 text-center mb-4">
                            {{ report.description }}
                        </p>
                        <div class="flex justify-center">
                            <span
                                class="px-4 py-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/30 rounded-full text-sm text-blue-400"
                            >
                                {{ report.type }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA Section -->
        <section class="py-20 bg-gradient-to-r from-blue-900 via-purple-900 to-orange-900">
            <div class="max-w-4xl mx-auto px-6 text-center">
                <h2 class="text-5xl font-bold mb-6 text-white">开始你的自我发现之旅</h2>
                <p class="text-xl text-gray-200 mb-8 leading-relaxed">每个人都有独特的内在密码，让 AI 帮你解锁真正的自己</p>
                <button
                    class="px-16 py-5 bg-gradient-to-r from-orange-500 to-red-500 text-white text-2xl font-bold rounded-full hover:shadow-2xl hover:shadow-orange-500/40 transform hover:scale-110 transition-all duration-300 cursor-pointer whitespace-nowrap !rounded-button"
                    @click="startTest"
                >
                    ▶️ 立即开始测试
                </button>
                <p class="text-sm text-gray-300 mt-4">完全免费 · 无需注册 · 即时获得结果</p>
            </div>
        </section>
        <!-- Footer -->
        <footer class="bg-slate-900 border-t border-gray-800 py-12">
            <div class="max-w-7xl mx-auto px-6">
                <div class="grid md:grid-cols-4 gap-8">
                    <div>
                        <div class="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent">
                            九型人格 AI
                        </div>
                        <p class="text-gray-400">基于前沿 AI 技术的人格测试平台，帮助你发现真实的自己。</p>
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-white">产品功能</h4>
                        <ul class="space-y-2 text-gray-400">
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">人格测试</a>
                            </li>
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">详细报告</a>
                            </li>
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">成长建议</a>
                            </li>
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">职业匹配</a>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-white">关于我们</h4>
                        <ul class="space-y-2 text-gray-400">
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">公司介绍</a>
                            </li>
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">技术团队</a>
                            </li>
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">联系我们</a>
                            </li>
                            <li>
                                <a href="#" class="hover:text-white transition-colors cursor-pointer">隐私政策</a>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-white">关注我们</h4>
                        <div class="flex space-x-4">
                            <a
                                href="#"
                                class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-500 transition-colors cursor-pointer"
                            >
                                <span class="text-white">💬</span>
                            </a>
                            <a
                                href="#"
                                class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center hover:bg-blue-400 transition-colors cursor-pointer"
                            >
                                <span class="text-white">🐦</span>
                            </a>
                            <a
                                href="#"
                                class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors cursor-pointer"
                            >
                                <span class="text-white">📱</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                    <p>&copy; 2025 九型人格 AI. 保留所有权利.</p>
                </div>
            </div>
        </footer>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'

const todayUsers = ref(14892)
const totalUsers = ref(1250000)

// 粒子效果相关
const particles = ref<Array<{
    class: string;
    style: {
        left: string;
        top: string;
        animationDelay: string;
        animationDuration: string;
    };
}>>([])

const heroBackground =
    'https://readdy.ai/api/search-image?query=futuristic%20digital%20neural%20network%20background%20with%20flowing%20data%20streams%20and%20glowing%20nodes%20in%20deep%20blue%20and%20purple%20colors%2C%20abstract%20technology%20visualization%20with%20soft%20lighting%20and%20modern%20aesthetic&width=1440&height=1024&seq=hero001&orientation=landscape'
const personalityChart =
    'https://readdy.ai/api/search-image?query=modern%20enneagram%20personality%20chart%20with%20nine%20interconnected%20points%20glowing%20with%20soft%20blue%20and%20orange%20light%2C%20clean%20minimalist%20design%20with%20geometric%20patterns%20and%20subtle%20gradient%20background&width=600&height=400&seq=chart001&orientation=landscape'

const reportPreviews = ref([
    {
        title: '完美主义者',
        description: '追求卓越，注重细节，有强烈的责任感和道德标准',
        type: '第一型',
        color: 'text-blue-400',
        image: 'https://readdy.ai/api/search-image?query=professional%20business%20person%20working%20meticulously%20on%20detailed%20documents%20with%20clean%20organized%20workspace%2C%20soft%20lighting%20and%20modern%20office%20environment%20with%20blue%20and%20white%20color%20scheme&width=400&height=300&seq=type001&orientation=landscape',
    },
    {
        title: '助人者',
        description: '关爱他人，善于理解和支持，具有强烈的同理心',
        type: '第二型',
        color: 'text-green-400',
        image: 'https://readdy.ai/api/search-image?query=caring%20person%20helping%20others%20in%20a%20warm%20and%20supportive%20environment%20with%20soft%20natural%20lighting%2C%20showing%20empathy%20and%20kindness%20with%20gentle%20green%20and%20warm%20color%20tones&width=400&height=300&seq=type002&orientation=landscape',
    },
    {
        title: '成就者',
        description: '目标导向，充满活力，善于激励自己和他人',
        type: '第三型',
        color: 'text-orange-400',
        image: 'https://readdy.ai/api/search-image?query=successful%20ambitious%20person%20celebrating%20achievement%20in%20modern%20office%20setting%20with%20dynamic%20energy%2C%20bright%20orange%20and%20gold%20lighting%20with%20professional%20atmosphere&width=400&height=300&seq=type003&orientation=landscape',
    },
])

// 创建粒子效果
const createParticles = () => {
    const particleCount = 50 // 增加粒子数量
    const newParticles = []
    
    for (let i = 0; i < particleCount; i++) {
        const size = Math.random() * 3 + 1 // 1-4px 大小
        const opacity = Math.random() * 0.6 + 0.2 // 0.2-0.8 透明度
        const colors = ['bg-blue-400', 'bg-purple-400', 'bg-cyan-400', 'bg-indigo-400']
        const color = colors[Math.floor(Math.random() * colors.length)]
        
        newParticles.push({
            class: `w-${Math.ceil(size)} h-${Math.ceil(size)} ${color} particle-float`,
            style: {
                left: Math.random() * 100 + '%',
                top: Math.random() * 100 + '%',
                animationDelay: Math.random() * 4 + 's', // 0-4秒延迟
                animationDuration: (Math.random() * 2 + 3) + 's', // 3-5秒周期
                opacity: opacity.toString(),
            }
        })
    }
    
    particles.value = newParticles
}

// 重新创建粒子的定时器
let particleTimer: number | null = null

const scrollToTest = () => {
    const element = document.querySelector('#reports')
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
    }
}

const startTest = () => {
    // 这里可以添加跳转到测试页面的逻辑
    console.log('开始测试')
}

onMounted(() => {
    // 创建初始粒子
    createParticles()
    
    // 每10秒重新生成粒子，保持动态效果
    particleTimer = window.setInterval(() => {
        createParticles()
    }, 10000)
    
    // 添加数字动画效果
    const animateNumber = (target: any, finalValue: number, duration: number = 2000) => {
        const startValue = 0
        const increment = finalValue / (duration / 16)
        let currentValue = startValue
        const timer = setInterval(() => {
            currentValue += increment
            if (currentValue >= finalValue) {
                currentValue = finalValue
                clearInterval(timer)
            }
            target.value = Math.floor(currentValue)
        }, 16)
    }
    
    // 延迟启动动画
    setTimeout(() => {
        animateNumber(todayUsers, 14892, 2000)
        animateNumber(totalUsers, 1250000, 2500)
    }, 1000)
})

onUnmounted(() => {
    if (particleTimer) {
        clearInterval(particleTimer)
    }
})
</script>

<style scoped lang="scss">
.\!rounded-button {
    border-radius: 9999px !important;
}

// 粒子浮动效果
@keyframes particle-float {
    0% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(-30px) translateX(15px) scale(1.2);
        opacity: 0.8;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-60px) translateX(-10px) scale(0.8);
        opacity: 0;
    }
}

.particle-float {
    animation: particle-float linear infinite;
}

.particles-container {
    overflow: hidden;
}

.particle {
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes glow {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
    }
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #f97316);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #ea580c);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 渐变文字动画 */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 4s ease infinite;
}

/* 添加一些额外的粒子尺寸类 */
.w-1 {
    width: 0.25rem;
}
.h-1 {
    height: 0.25rem;
}
.w-2 {
    width: 0.5rem;
}
.h-2 {
    height: 0.5rem;
}
.w-3 {
    width: 0.75rem;
}
.h-3 {
    height: 0.75rem;
}
.w-4 {
    width: 1rem;
}
.h-4 {
    height: 1rem;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .particles-container {
        .particle {
            transform: scale(0.7);
        }
    }
}

/* 减少运动对于偏好减少动画的用户 */
@media (prefers-reduced-motion: reduce) {
    .particle-float,
    .animate-gradient,
    .animate-float,
    .animate-glow {
        animation: none;
    }
    
    .particle {
        opacity: 0.3 !important;
    }
}
</style>
